<template>
    <div class="border">
        <div class="lan"></div>
        <div class="p">
            <p><span class="p">库存报表</span></p>
        </div>
        <br>
        <el-input placeholder="请输入内容" v-model="input4" style="margin-left:2%;width: 20%;" >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <span style="margin-left:2%;font-size:85%">选择类型*</span>
              <el-select v-model="type" placeholder="请选择"  style="margin-left:2%;">
                <el-option v-for="item4 in options10" :key="item4.value" :label="item4.typeName" :value="item4.id">
                </el-option>
              </el-select>
       <el-button type="primary" style="margin-left:2%;background-color:#2d8cf0" @click="selectVal">搜索</el-button>
      <el-button type="primary" style="margin-left:25%;background-color:#2d8cf0" @click="viewComeIn">查看进货记录</el-button>
       
        <div class="table" style="font-size:10px">
            <el-table :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe style="width: 90%; margin-left:2%; font-size: 15px" size="mini">
                
                <el-table-column prop="id" label="产品编号" align="center"> </el-table-column>
                <el-table-column prop="proname" label="产品名称" align="center"> </el-table-column>
                <el-table-column prop="price" label="单价/￥" align="center"> </el-table-column>
                <el-table-column prop="surpluscount" label="剩余数量" align="center"> 
                    
                </el-table-column>
                <el-table-column prop="totalPrice" label="合计/￥" align="center" :formatter="aaa"> 
                    
                           
                    
                </el-table-column>
                <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="addCount(scope)">进货</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 0px; margin-left: 80px; position: absolute">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 7, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="list.length">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="进货" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="产品名称" :label-width="formLabelWidth" >
                    <el-input v-model="form.proname" disabled></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" disabled></el-input>
                </el-form-item>
                <el-form-item label="进货数量" :label-width="formLabelWidth">
                    <el-input v-model="form.inCount"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {
     data() {
        return {
            type:'',
            proname:'',
            input4: '',
            list: [],
            options10:'',
            selectValue: {
                proname: "",
                type: "",
               
            },
            currentPage: 1, //默认进入第几页
            currentIndex: "", //我也不知道
            pagesize: 5, //每页显示条数
            //新增弹框
            dialogFormVisible: false,
            form:{
                proname:'',
                proNum:'',
                price:'',
                surplusCount:'',
                inCount:''
               
            }
        }
    },
    created() {
        this.getList();
        this.getType()
    },
    methods: {
        getList() {
            axios({
                url: "/api/product/getProList",
                method: "GET",
                params: {
                    proname: this.proname,
                    type:this.type
                }
            }).then(res => {
                this.list = res.data.data
            })
        },
        selectVal() {
                this.proname = this.input4,
                this.type = this.type,
                this.getList();
        },  
        addCount(scope) {
            
            
            this.form=scope.row,
            this.form.proNum=scope.row.id,
            this.form.proname=scope.row.proname,
            this.dialogFormVisible = true
        },
        add(){
            
             axios({
                url: "/api/product/add",
                method: "GET",
                params: this.form
            }).then(res => {
               this.$message({
                    message: '进货成功',
                    type: 'success'
                });
                 this.dialogFormVisible = false
            })
            
        },
        handleSizeChange(val) {
            this.pagesize = val;
            console.log(`每页 ${val} 条`);
            this.loadList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadList();
        },
        /**********分页结束*********** */
        edit(row) {
        this.$router.push({ path: '/editService'+"", query: { id: row.id }}) //带参跳转
        },
        aaa(bbb){
            return bbb.price*bbb.surpluscount
        },
        getType(){
            axios({
            url: "/api/product/getTypeList",
            method: "GET",
            }).then(res => {
                this.options10  = res.data.data
            })
        },
        viewComeIn(){
             this.$router.push({ path: '/viewComeIn' });
        }
    },
       
    
}
</script>

<style scoped>
html,
body {
    height: 100%;
    background-color: #f2f7fb;
}

.table {
    /* margin-left: 20px;
    margin-right: 20px; */
    margin-top: 20px;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

html {
    display: block;
}

.border {
    border-width: 0px;
    left: 0px;
    top: 0px;
    width: 95%;
    height: 912px;
    background: inherit;
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 2%;
    margin-top: 1%;
}

.erhang {
    margin-top: 20px;
}

.lan {
    border-width: 0px;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 20px;
    margin-top: 1%;
    float: left;
}

.p {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";
    font-kerning: normal;
    margin-left: 20px;
    margin-top: 1%;
    padding-top: 1%;
}

p {
    margin: 0px;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -moz-font-feature-settings: "kern=1";
    font-kerning: normal;
}
.addBtn{
    background-color: #2984f8;
} 
.daochu{
    background-color: white;
    color: #2984f8;
} 
</style>